// components/v-tab/v-tab.js
Component({
  properties: {
    tabs: {
      type: Array,
      value: []
    }
  },

  data: {
    currentIndex: 0,
    tabWidth: 0,
    scrollLeft: 0
  },

  observers: {
    'tabs': function(newVal) {
      if (newVal.length <= 4) {
        this.calculateTabWidth()
      }
    }
  },

  methods: {
    calculateTabWidth() {
      const windowInfo  = wx.getWindowInfo()
      const screenWidth = windowInfo .screenWidth
      const rpxRatio = screenWidth / 750
      const totalGap = 40 * 2 + 40 * (this.data.tabs.length - 1)
      const tabWidth = (750 - totalGap) / this.data.tabs.length
      this.setData({ tabWidth })
    },

    handleTabClick(e) {
      const index = Number(e.currentTarget.dataset.index)
      const screenWidth = wx.getWindowInfo().screenWidth
      const scrollLeft = (index * (screenWidth / 4)) - (screenWidth / 2)
      
      this.setData({
        currentIndex: index,
        scrollLeft: scrollLeft > 0 ? scrollLeft : 0
      })

      this.triggerEvent('change', { index })
    }
  }
})